/**
 * 
 */
var LayoutDrag = function (ele, opt) {
	this.$elem = ele;
	this.defaults = {
		dropHtml: "",
		dragparam: {
			cursor: "move",
			containment: "parent",
			snap: true
		},
		resizeparam: {
			autoHide: true,
			animate: true,
			handles: 'n, e, s, w, ne, se, sw, nw',
			containment: ".main"
		}
	}
	this.options = $.extend({}, this.defaults, opt);
	this.width = $(ele).width();
	this.height = $(ele).height();
	this.h_line_t = "<hr class='h_line_t h_line'/>";
	this.h_line_b = "<hr class='h_line_b h_line'/>";
	this.v_line_l = "<hr class='v_line_l h_line'/>";
	this.v_line_r = "<hr class='v_line_r h_line'/>";
}
LayoutDrag.prototype = {
	init: function () {
		this.layoutDrag();
		this.layoutDrop();
	},
	layoutDrag: function () {
		var target = this.options.drag;
		$(target).draggable({
			cursor: "move",
			helper: "clone"
		});
	},
	layoutDrop: function () {
		var that = this;
		var elem = this.$elem
		var target = this.options.drag;
		var dropHtml = this.options.dropHtml;
		$(elem).droppable({
			accept: target,
			activeClass: "ui-state-hover",
			hoverClass: "ui-state-active",
			drop: function (event, ui) {
				var html = $("<div class='grid ui-widget-content'></div>").html(ui.helper.html());
				if (dropHtml) {
					html = $("<div class='grid ui-widget-content'></div>").html(dropHtml);
				}

				that.initModal(html);
				$(elem).append(html);

			}
		});
	},
	initModal: function (html) {
		var that = this;
		var e = window.event;
		var option = this.options;
		var elem = this.$elem
		var mouseOpt = this.mousePosition(e);

		html.width(this.width / 5);
		html.height(this.height / 5);

		html.css("position", "absolute");
		html.css("top", mouseOpt.y);
		html.css("left", mouseOpt.x);
		html.draggable({
			cursor: option.dragparam.cursor,
			containment: option.dragparam.containment,
			snap: option.dragparam.snap
		}).resizable({
			// ghost: true,
			autoHide: option.resizeparam.autoHide,
			animate: option.resizeparam.animate,
			handles: option.resizeparam.handles,
			containment: option.resizeparam.containment,
			resize: function (event) {
				var size = $(this).resizable("instance");
				that.autoResize(html, size);
			},
			stop: function () {
				$(elem).find(".h_line").remove();
			}
		});
	},
	autoResize: function (html, size) {
		var that = this;

		var left = size.position.left;
		var top = size.position.top;
		var width = size.size.width;
		var height = size.size.height;
		var right = left + width;
		var bottom = top + height;

		html.siblings("div").each(function (i, item) {
			var l = $(item).position().left;
			var r = l + $(item).width();
			var t = $(item).position().top;
			var b = t + $(item).height();

			that.resizetop(top, t, b, item, size)
			that.resizebot(bottom, t, b, item, size);

			that.resizeleft(left, l, r, item, size)
			that.resizeright(right, l, r, item, size);

		});
	},
	resizetop: function (top, t, b, item, size) {
		var elem = item;
		var h_line_t = $(this.h_line_t);
		this.setwidth(h_line_t);

		if (top - t < 20 && top - t > -20) {
			h_line_t.css("top", "4px");
			$(elem).append(h_line_t);
			size.size.height = (top - t) + size.size.height;
			size.position.top = t;
		} else if (top - b < 20 && top - b > -20) {
			h_line_t.css("bottom", "-10px");
			$(elem).append(h_line_t);
			size.size.height = (top - b) + size.size.height-2;
			size.position.top = b + 2;
		} else {
			$(elem).children(".h_line_t").remove();
		}
	},
	resizebot: function (bottom, t, b, item, size) {
		var elem = item;
		var h_line_b = $(this.h_line_b);
		this.setwidth(h_line_b);

		if (bottom - t < 20 && bottom - t > -20) {
			h_line_b.css("top", "4px");
			$(elem).append(h_line_b);
			size.size.height = (t - bottom) + size.size.height;
		} else if (bottom - b < 20 && bottom - b > -20) {
			h_line_b.css("bottom", "-10px");
			$(elem).append(h_line_b);
			size.size.height = (b - bottom) + size.size.height;
		} else {
			$(elem).children(".h_line_b").remove();
		}
	},
	setwidth: function (tar) {
		var ele = this.$elem;
		tar.width($(ele).width());
	},
	setheight: function (tar) {
		var ele = this.$elem;
		tar.height($(ele).height());
	},
	resizeleft: function (left, l, r, item, size) {
		var elem = item;
		var v_line = $(this.v_line_l);

		if (left - l < 20 && left - l > -20) {
			v_line.css("left", "-1px");
			$(elem).append(v_line);
			size.size.width = (left - l) + size.size.width;
			size.position.left = l;
		} else if (left - r < 20 && left - r > -20) {
			v_line.css("right", "-1px");
			$(elem).append(v_line);
			size.size.width = (left - r) + size.size.width - 2;
			size.position.left = r + 2;
		} else {
			$(elem).children(".v_line_l").remove();
		}
	},
	resizeright: function (right, l, r, item, size) {
		var elem = item;
		var v_line = $(this.v_line_r);

		if (right - l < 20 && right - l > -20) {
			v_line.css("left", "-1px");
			$(elem).append(v_line);
			size.size.width = (l - right) + size.size.width;
			// size.position.left = l;
		} else if (right - r < 20 && right - r > -20) {
			v_line.css("right", "-1px");
			$(elem).append(v_line);
			size.size.width = (r - right) + size.size.width;
		} else {
			$(elem).children(".v_line_r").remove();
		}
	},
	mousePosition: function (ev) {
		ev = ev || window.event;
		if (ev.pageX || ev.pageY) {
			return { x: ev.pageX, y: ev.pageY };
		}
		return {
			x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
			y: ev.clientY + document.body.scrollTop - document.body.clientTop
		};
	}
}
$.fn.layout = function (options) {
	var layoutDrag = new LayoutDrag(this, options);
	layoutDrag.init();
}